<template>
  <h1>App</h1>
  <div>
    <!-- 表达式 -->
    <!-- 表达式：会产生一个值 -->
    <h1>{{ 1 + 1 }}</h1>
    <h2>{{ 5 > 20 ? 666 : 777 }}</h2>

    <div>
      <h3>{{ title }}</h3>
      <h3>{{ title.toUpperCase() }}</h3>
      <button @click="setTitle">更新</button>
    </div>

    <div>
      <ul>
        <li v-for="item in hobbys">{{ item }}</li>
      </ul>
      <button @click="addHobbys">添加爱好</button>
    </div>

    <br />

    <div>
      {{ sex ? "男" : "女" }}
      <button @click="sex = !sex">切换</button>
    </div>

    <div>
      <ul>
        <!-- item in users 形式的特殊语法，其中 users 是源数据的数组，而 item 是迭代项的别名 -->
        <li v-for="item in users">{{ item }}</li>
      </ul>
      <button @click="addUsers">添加王中王</button>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive } from "vue";
// vue3响应式api有两个：
// ref(任意类型):需要通过.value去操作。模板中直接使用即可，因为会自动解包
// reactive(数组和对象)
// 两者区别：ref可以被覆盖，reactive不能被覆盖
let title = ref("hello");
let hobbys = ref(["篮球", "足球", "羽毛球", "乒乓球"]);
let sex = ref(true); //true-男，false-女

let users = reactive(["黎明", "刘德华", "张学友", "郭富城"]);

const setTitle = () => {
  title.value = "world";
};

const addHobbys = () => {
  hobbys.value.push("排球");
  hobbys.value = [
    "子鼠",
    "丑牛",
    "寅虎",
    "卯兔",
    "辰龙",
    "巳蛇",
    "午马",
    "未羊",
    "申猴",
    "酉鸡",
    "戌狗",
    "亥猪",
  ];
};
const addUsers = () => {
  users.push("周星驰");
};
</script>

